{{!--
Copyright (C) 2017 Draios inc.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License version 2 as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
--}}

<div class="sd-viz-timeline__axis"></div>

{{#if hoverTimestamp}}
    <div class="sd-viz-timeline__hover-marker" style={{hoverMarkerStyle}}></div>
{{/if}}

<div class="sd-viz-timeline__left-area" style={{leftAreaStyle}}>
    {{sd-viz-timeline-draggable-handle drag=(action "dragLeft")}}
</div>

<div class="sd-viz-timeline__selected-area">
    <div class="sd-viz-timeline__time
        {{if isTimeLabelInternal "sd-viz-timeline__time--is-internal" "sd-viz-timeline__time--is-external"}}
        sd-viz-timeline__time--is-from"
    >
        {{number-to-string selectedRelativeFrom dataType="relativeTime"}}
    </div>

    <div class="sd-viz-timeline__time-diff
        {{if isTimeDiffLabelOnTop "sd-viz-timeline__time-diff--is-on-top"}}
        "
    >
        duration: {{number-to-string selectedDiff dataType="relativeTime"}}
    </div>

    <div class="sd-viz-timeline__time
        {{if isTimeLabelInternal "sd-viz-timeline__time--is-internal" "sd-viz-timeline__time--is-external"}}
        sd-viz-timeline__time--is-to"
    >
        {{number-to-string selectedRelativeTo dataType="relativeTime"}}
    </div>
</div>

<div class="sd-viz-timeline__right-area" style={{rightAreaStyle}}>
    {{sd-viz-timeline-draggable-handle drag=(action "dragRight")}}
</div>
